<template>
<!-- 商品列表组件 -->
    <div class="gi-link" :class="itemShow ? 'border-active' : ''" @click="jump(item.id)">
      <div class="gi-wrap" @mouseover="enter()" @mouseout="leave()">
        <div class="gpi-img">
           <img v-lazy="item.skuImage" :key="item.skuImage"/>
        </div>
        <div class="gpi-content">
          <p class="gpi-content-title">{{item.skuName}}</p>
          <div class="gpi-content-price">
            <p class="gpi-content-price-left">¥{{item.price}}</p>
            <p class="gpi-content-price-middle">{{item.spreadNum}}人热推中</p>
            <p class="gpi-content-price-right">库存<span>{{item.skuNum}}</span></p>
          </div>
          <div class="gpi-content-msg">
            <div class="gpi-msg-item">
              <p class="p1">佣金</p>
              <p class="p2">¥{{item.commission}}</p>
            </div>
            <div class="gpi-msg-item">
              <p class="p1">佣金比例</p>
              <p class="p2">{{item.commissionRate}}%</p>
            </div>
            <div class="gpi-msg-item no-border ">
              <p class="p1">月销</p>
              <p class="p2">{{item.monthSales}}</p>
            </div>
          </div>
          <div class="gpi-hover" v-show="itemShow">
            <div class="one" @click.prevent="$emit('buy',item.entrust)">购买寄样</div>
            <div @click.prevent="$emit('close',item.spread)">取消选货</div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      itemShow: false,
    }
  },
  methods: {
    enter() {//移入显示
      // this.$emit('enter', this.itemShow)
      this.itemShow = true
      // this.$router.push('/goodsDetail1')
    },
    leave() {//移出消失
      // this.$emit('leave', this.itemShow)
      this.itemShow = false
      // this.$router.push('/goodsDetail1')
    },
    jump(id) {
      const {href} = this.$router.resolve({
        path:'/goodsDetail',
        query:{id:id}
      })
      window.open(href,'_blank')
    }
  }
}
</script>

<style scoped>
  .gi-link {
    width: 230px;
    height: 360px;
    box-sizing: border-box;
    display: block;
    background: #fff;
    border: 1px solid #e1e1e1;
  }
  .gi-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .gpi-img {
    width: 228px;
    height: 229px;
  }
  .gpi-img img {
    width: 100%;
    height: 100%;
  }
  .gpi-content {
    padding-top: 10px;
  }
  .gpi-content-title {
    font-size: 16px;
    color: #000;
    line-height: 1.2;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .gpi-content-price {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
    padding: 0 10px;
  }
  .gpi-content-price-left {
    color: #de1e1e;
    font-size: 18px;
  }
  .gpi-content-price-middle {
    color: #666;
    font-size: 14px;
    padding-right:16px;
  }   
  .gpi-content-price-right{
    color:#666666;
  }
  .gpi-content-price-right span{
    display:inline-block;
    text-indent:5px;
  }
  .gpi-content-msg {
    display: flex;
    background: #fbfbfb;
    margin-top: 10px;
    padding: 5px 0;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .gpi-msg-item {
    border-right: 1px solid #e1e1e1;
    width: 33%;
    text-align: center;
  }
  .gpi-msg-item .p1 {
    color: #656666;
    font-size: 12px;
  }
  .gpi-msg-item .p2 {
    font-size: 14px;
    color: #ff6600;
    padding-top: 7px;
  }
  .no-border {
    border: none;
  }
  .gpi-hover {
    height: 44px;
    background: #0096e6;
    text-align: center;
    line-height: 44px;
    color: #ffffff;
    font-size: 16px;
    transition: height .2s;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
  }
  .gpi-hover div {
    width: 50%;
  }
  .gpi-hover .one {
    border-right: 1px dashed #fff;
  }
  .border-active {
    border: 1px solid #0096e6;
  }
</style>
